<template>
  <v-layout type="main">
    <div class="layout-top">
      <div class="rollback" @click="$router.push('/modelEvaluate')">
        <img src="~@/assets/img/prev.png" alt="">
        <span>返回</span>
      </div>

      <div class="code-description">
        <div class="dea_top">
          <div>
            <el-image class="nav_box" :src="detailData.model.avatar ? detailData.model.avatar : require('@/assets/img/drone3.jpg')" fit="fit"></el-image>
          </div>

          <div class="header_box">
            <div class="code-desc-header">
              <div class="title">
                <div class="title-header">
                  <span>{{ detailData.model.name }}</span>
                </div>

                <div class="code-tags">
                  <div class="user-tag tag">
                    <img src="~@/assets/img/user.png" alt="">
                    {{
                      detailData.create_user && (detailData.create_user.nick_name ||
                        detailData.create_user.username)
                    }}
                  </div>

                  <div :class="['status-tag tag', {
                        'danger': detailData.status === 'terminated',
                        'warning': detailData.status != 'terminated' && detailData.status != 'running',
                        'success': detailData.status === 'running'
                      }]">
                    {{ statusMap[detailData.status] }}
                  </div>

                  <div class="time-tag tag">
                    <span>创建时间：</span>
                    {{ detailData.create_time }}
                  </div>

                  <div class="time-tag tag">
                    <span>更新时间：</span>
                    {{ detailData.update_time }}
                  </div>
                </div>

                <div class="staet_box">
                  <plug-state :statusStr="detailData.status"/>
                </div>
              </div>
              <!-- <div class="code-status">
              <plug-state :statusStr="detailData.status" />
            </div> -->
            </div>
          </div>
        </div>

        <!-- <div class="desc-container">
        <el-input type="textarea" placeholder="暂无描述信息" :autosize="{ minRows: 4, maxRows: 4 }" disabled
          v-model="detailData.desc" style="cursor: pointer" />
      </div> -->
      </div>


      <div class="btns-container">
        <div class="alick-handle-btns">
          <!-- <a class="handle-btn" href="javascript:;" @click="start" v-show="detailData.status == 'terminated'">启动</a>
          <a class="handle-btn" href="javascript:;" @click="stop" v-show="detailData.status != 'terminated'">停止</a>
          <a class="handle-btn" href="javascript:;" @click="entry" v-show="detailData.status == 'running'">进入</a> -->

          <el-button class="handle-btn" type="success" size="medium" @click="start"
                     v-show="detailData.status == 'terminated'">
            启动
          </el-button>
          <el-button class="handle-btn" type="danger" size="medium" @click="stop"
                     v-show="detailData.status != 'terminated'">
            停止
          </el-button>
        </div>
      </div>
    </div>

    <div class="tabs-left">
      <el-tabs v-model="nowRouter" @tab-click="skip" v-show="!$route.meta.hideDetails">
        <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i"/>
      </el-tabs>
    </div>

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view class="content-detail" :version="version" :detailData.sync="detailData" v-if="detailData" @getDetail="getDetail"/>
    </div>
  </v-layout>
</template>

<script>
import {getModelEvaluatioeDetail, startModelEvaluatio, stopModelEvaluatio} from '@/api/modelEva'
import plugState from '@/components/module/plug-state'

export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      version: {id: this.$route.query.model_eva_id},
      detailData: null,
      model_eva_id: this.$route.query.model_eva_id,
    };
  },
  components: {
    plugState,
  },
  methods: {
    skip() {
      let path = `/modelEvaluate/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          model_eva_id: this.model_eva_id
        }
      })
    },
    async getDetail() {
      let ret = await getModelEvaluatioeDetail({ id: this.model_eva_id })
      console.log("详情信息", ret.data)
      this.detailData = ret.data
      if (this.detailData.type_id == 1) {
        this.detailData.type = { "name": "自定义", "id": "1" }
        this.showDiv = true
      }
    },
    async start() {
      await startModelEvaluatio(this.model_eva_id);
      this.getDetail()
    },
    async stop() {
      await stopModelEvaluatio(this.model_eva_id);
      this.getDetail()
    },
  },
  mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == 'modelEvaluate' && e.children
    )
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    this.getDetail()
  },
  destroyed() {
  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";

.desc-container {
  margin-top: 20px;
}
</style>
